<template>
	<view>
		<view class="personal">
			<view class="personal-main">
				<oss-upload>		
					</oss-upload>
				<view class="personal-info">
					<view class="">{{userInfo.name}}</view>
					<view class="">{{userInfo.email}}</view>
				</view>
			</view>
		</view>
		<view class="n-p" @click="goToSomeWhere(item.id)" v-for="(item,index) in list" :key="index" hover-class="hover-class" >
			<view style="position: relative" >
				<view class="p-left">
					<u-icon :name="item.icon" size="30" color="#757575"></u-icon>
				</view>
			</view>
			<view class="p-right">
				<view class="p-right-main">
					<view class="p-right-main-name" style="font-size: 32rpx;">{{item.name}}</view>
				</view>
				<view class="lfet-a">
					<view style="position: relative">
					</view>
					<u-icon name="arrow-right" size="20" class="p-right-icon"></u-icon>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				userInfo:{},
				list: [{
					name: '个人信息',
					id: 'baseInfo',
					icon: 'account-fill',
					iconBackground: '#398c0c',
				}, {
					name: '我的订单',
					id: 'myOrder',
					icon: 'bag-fill',
					iconBackground: '#398c0c',
				}, {
					name: '我的收藏',
					id: 'myFavourite',
					icon: 'star-fill',
					iconBackground: '#5e2d88',
				}, {
					name: '收货地址',
					id: 'myAddress',
					icon: 'map-fill',
					iconBackground: '#5e2d88',
				}, {
					name: '全部设置',
					id: 'setUp',
					icon: 'setting-fill',
					iconBackground: '#3b2021',
				}, {
					name: '退出登录',
					id: 'loginOut',
					icon: 'trash-fill',
					iconBackground: '#3b2021',
				}],
			}
		},
		onShow() {
			this.$u.utils.isLogin()
			this.getUserInfo()
			//console.log('show')
		},
		methods: {
			//跳转
			async goToSomeWhere(id){
				if(id=='baseInfo'){
					this.$u.route({
						url:'pages/center/baseInfo',
						type:'navigateTo'
					})
				}else if(id=='loginOut'){
					await this.$u.api.authLoginOut()
					this.$u.toast('退出成功')
					//跳转首页
					setTimeout(()=>{
						//清除缓存
						this.$u.vuex('vuex_token',null)
						this.$u.vuex('vuex_user',null)
						this.$u.route({
							url:'pages/index/index',
							type:'reLaunch'
						})
					},1000)
				
				}
			},
			// 获取用户信息
			async getUserInfo(){
				let resultInfo = await this.$u.api.userInfo()
				this.$u.vuex('vuex_user',resultInfo)
				let lifeData = uni.getStorageSync('lifeData')
				this.userInfo = lifeData['vuex_user']
			}
		}
	}
</script>

<style>
	
	page {
		background-color: #f7f7f7;
	}
	.personal {
		display: flex;
		align-items: center;
		justify-content: space-between;
		padding: 30rpx 0 40rpx 30rpx;
	}

	.personal-main {
		display: flex;
		align-items: center;
	}

	.personal-info {
		display: flex;
		flex-direction: column;
	}

	.u-avatar {
		margin-right: 30rpx;
	}

	.navbar-right {
		padding: 0 40rpx;
	}

	.navbar-right-icon {
		margin-left: 50rpx;
	}

	.hover-class {
		background-color: #efefef;
	}

	.n-p {
		display: flex;
		align-items: center;
		background-color: #ffffff;
		margin-bottom: 20rpx;
	}

	.p-right-icon {
		padding: 0 40rpx;
	}

	.p-left {
		display: flex;
		align-items: center;
		justify-content: center;
		width: 60rpx;
		height: 60rpx;
		padding: 10rpx;
		margin: 20rpx;
		color: #FFFFFF;
		border-radius: 10rpx;

	}

	.p-right {
		height:90rpx;
		flex: 1;
		display: flex;
		align-items: center;
		justify-content: space-between;
	}

	.p-right-main {
		display: flex;
		align-items: center;
		justify-content: space-between;
	}

	.p-right-main-name {
		font-size: 36rpx;
		font-weight: 500;
	}

	.p-right-main-time {
		margin-right: 20rpx;
		font-size: 24rpx;
		color: #9d9d9d;
	}
</style>
